<template>
  <div class="page">
    <div class="search">
      <entity-view formItemWidth="320px" :model="form" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
        <form-item label="活动名称" v-model="form.mcName"/>
        <form-item label="参与机构">
          <a-tree-select
            v-model="form.orgId"
            :tree-data="orgList"
            placeholder="请输入代码或名称"
            :dropdown-style="{maxHeight: '200px'}"
            :dropdownMatchSelectWidth="true"
          />
        </form-item>
        <form-item label="优惠方式" v-model="form.mcType" inputType="select" :options="mcTypeOptions" />
        <form-item label="活动状态" v-model="form.mcStatus" inputType="select" :options="mcStatusOptions"/>
        <form-item label="创建时间" >
          <a-range-picker v-model="form.rangeDate"/>
        </form-item>
      </entity-view>
      <div class="row justify-center">
        <a-space>
          <a-button type="primary" @click="search">查询</a-button>
          <a-button @click="reset">重置</a-button>
        </a-space>
      </div>
    </div>
    <div class="action">
      <a-space>
        <a-button type="primary" icon="plus" @click="add">新增</a-button>
      </a-space>
    </div>
    <div class="content">
      <a-table :data-source="dataSource" :columns="columns" :pagination="pagination" :scroll="{ x: true }"
               row-key="dicNo" class="scrollable" @change="pageChange">
        <template v-slot:operation="text, record">
          <div style="white-space: nowrap">
            <a-icon type="setting" theme="twoTone" twoToneColor="#4a9ff5" @click="edit(record)" title="修改"/>
            <a-icon type="container" theme="twoTone" twoToneColor="#4a9ff5" @click="paymentDetail(record)"
                    title="进行中增加商户"/>
            <a-icon type="eye" theme="twoTone" twoToneColor="#4a9ff5" @click="view(record)" title="详情"/>
            <a-icon type="delete" theme="twoTone" twoToneColor="red" @click="del(record)" title="删除"/>
          </div>
        </template>
      </a-table>
    </div>
    <operation ref='operation' @refresh="fetch"/>
  </div>


</template>


<script>
import EntityView from "@/components/common/entityView/EntityView";
import FormItem from "@/components/common/entityView/FormItem";
import operation from './MarketActiManageForCustOperation.vue';
import fetchOrgList from "./fetchOrgList";
import moment from 'moment';

export default {
  name: 'MarketActiManageForCust',
  components: {
    EntityView,
    FormItem,
    operation
  },
  mixins: [fetchOrgList],
  data() {
    return {
      form: {
        mcName: "",
        orgId: '',
        mcType: "",
        mcStatus: "",
        rangeDate: null,
      },
      mcTypeOptions: [
        {name: '请选择', value: ''},
        {name: '满额立减固定金额', value: '00'},
        {name: '满额立减随机金额', value: '01'},
        {name: '满额固定折扣', value: '02'},
        {name: '满额随机折扣', value: '03'},
        {name: '卡券类-免费类-代金券', value: '10'},
        {name: '卡券类-购买类-代金券', value: '11'}
      ],
      mcStatusOptions: [
        {name: '请选择', value: ''},
        {name: '草稿', value: '0'},
        {name: '未发布', value: '1'},
        {name: '进行中', value: '2'},
        {name: '已暂停', value: '3'},
        {name: '已结束', value: '9'},
      ],
      dataSource: [],
      columns: [
        {title: '优惠活动名称', dataIndex: 'mcName'},
        {title: '优惠活动编号', dataIndex: 'mcNo'},
        {
          title: '优惠方式', dataIndex: 'mcType', customRender(text) {
            return ({
              "00": '满额立减固定金额',
              "01": '满额立减随机金额',
              "02": '满额固定折扣',
              "03": '满额随机折扣',
              "10": '卡券类-免费类-代金券',
              "11": '卡券类-购买类-代金券'
            }[text]) || '';
          }
        },
        {
          title: '活动起始时间', dataIndex: 'mcStartDate',
          customRender(text) {
            return moment(text).format('YYYY-MM-D')
          }
        },
        {
          title: '活动终止日期', dataIndex: 'mcEndDate', customRender(text) {
            return moment(text).format('YYYY-MM-D')
          }
        },
        {
          title: '出资方', dataIndex: 'sponsor',
          customRender(text) {
            return ({"0": '银行全资', "1": '银行商户联合', "2": '商户全资', "3": '商户全资免充值'}[text]) || '';
          }
        },
        {
          title: '活动状态', dataIndex: 'mcStatus', customRender(text) {
            return ({
              "0": '草稿',
              "1": '未发布',
              "2": '进行中',
              "3": '已暂停',
              "4": '自然结束',
              "5": '强制结束',
              "6": '测试中',
              "9": '已结束'
            }[text]) || '';
          }
        },
        {
          title: '活动审核状态', dataIndex: 'auditStatus', customRender(text) {
            return ({
              "00": "待提交审批",
              "01": "新增-审批流程中",
              "02": "新增-审批通过",
              "03": "新增-审批拒绝",
              "04": "活动任务处理中",
              "11": "注销-审批流程中",
              "12": "注销-审批通过",
              "13": "注销-审批拒绝",
              "21": "停用-审批流程中",
              "22": "停用-审批通过",
              "23": "停用-审批拒绝",
              "31": "启用-审批流程中",
              "32": "启用-审批通过",
              "33": "启用-审批拒绝",
              "41": "修改-审批流程中",
              "42": "修改-审批通过",
              "43": "修改-审批拒绝",
              "51": "发布-审批流程中",
              "52": "发布-审批通过",
              "53": "发布-审批拒绝"
            }[text]) || '';
          }
        },
        {title: '活动预算(元)', dataIndex: 'budget'},
        {title: '已消耗预算', dataIndex: 'budgetUsed'},
        {title: '创建时间', dataIndex: 'createTime'},
        {
          title: '操作', fixed: 'right',
          scopedSlots: {customRender: 'operation'}
        }
      ],
      pagination: {
        pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
    };
  },
  methods: {
    async fetch() {
      const params = {
        mcName: this.form.mcName || null,
        orgId: this.form.orgId || null,
        mcType: this.form.mcType || null,
        mcStatus: this.form.mcStatus || null,
        pageNum: this.pagination.current || 1,
        pageSize: this.pagination.pageSize || 10,
      };
      if (this.form.rangeDate && this.form.rangeDate.length === 2) {
        params.startTime = this.form.rangeDate[0].format('YYYY-MM-DD') + " 00:00";
        params.endTime = this.form.rangeDate[1].format('YYYY-MM-DD') + " 23:59";
      }
      console.log("query params: ", params);
      const hideLoading = this.$message.loading("加载中...");
      try {
        const res = await this.$get('/admin/market/customerManager/list', params)
        this.dataSource = res.data.records || [];
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        this.$message.error('网络错误，请稍后再试！');
        console.error(e)
      }
      hideLoading()

      /*
      let params = {
        // mchntName: this.form.mchntName || null,
        // mchntNo: this.form.mchntNo || null,
        // cashbackMethod: this.form.cashbackMethod || null,
        // mcStatus: this.form.mcStatus || null,
        // pageNum: this.pagination.current,
        // pageSize: this.pagination.pageSize
      };
      if (this.form.rangeDate && this.form.rangeDate.length === 2) {
        params.startTime = this.form.rangeDate[0].format('YYYY-MM-DD') + " 00:00";
        params.endTime = this.form.rangeDate[1].format('YYYY-MM-DD') + " 23:59";
      }
      const hideLoading = this.$message.loading("加载中...");
      try {
        const res = await this.$get('等接口', params)
        this.dataSource = res.data.records || [];
        this.$set(this.pagination, "total", +res.data.total);
      } catch (e) {
        this.$message.error('网络错误，请稍后再试！')
        console.error(e)
      }
      hideLoading()

       */
    },
    search() {
      console.log('触发查询操作');
      this.pagination = Object.assign({}, {
        current: 1,
        pageSize: 10
      });
      this.fetch();
    },
    reset() {
      this.form = {
        mcName: "",
        orgId: '',
        mcType: "",
        mcStatus: "",
        rangeDate: null,
      };
      this.search();
    },
    add() {
      this.$refs.operation.show({}, 'add')
    },
    edit() {

    },
    view() {
    },
    del() {

    },
    handleChange() {

    },
    pageChange() {

    },
  },
  created() {
    this.fetch();
  }
};
</script>

<style scoped>
.page {
  width: 100%;
}

.row {
  display: flex;
  flex-direction: row;
}

.justify-center {
  justify-content: center;
}

.content {
  margin-top: 20px;
}

</style>
